$(() => {
    // 获取元素
    let $username = $("#username");
    let $password = $("#password");
    let $nickname = $("#nickname");
    let $registBtn = $("#registBtn");

    let $nameok = $("#nameok");
    let $nameerr = $("#nameerr");
    let $pwdok = $("#pwdok");
    let $pwderr = $("#pwderr");
    let $nickok = $("#nickok");
    let $nickerr = $("#nickerr");

    let username_lock = false;
    let password_lock = false;
    let nickname_lock = false;

    let $modal = $("#modal");
    let $caution = $("#caution");

    $username.on("blur", () => {
        // 获取用户名
        let val = $username.val();
        // 正则验证
        let result = Strategy.use("username", val)
        // 判断 
        if (!result) {
            $nameerr.css("display", "block");
            $nameok.css("display", "none");
            console.log("不符合正则");
            username_lock = false;
            return;
        }
        $.ajax({
            url: "/php/checkusername.php",
            data: {
                username: val
            },
            type: "get",
            dataType: "json",
            success(data) {
                if (!data.error) {
                    $nameok.css("display", "block");
                    $nameerr.css("display", "none");

                    username_lock = true;
                } else {
                    $nameerr.css("display", "block");
                    $nameok.css("display", "none");
                    username_lock = false;
                    $caution.html("用户名重复！");
                    $modal.modal('show');
                    console.log("重复");
                }
            }
        })
    })


    $password.on("blur", () => {
        // 获取密码
        let password = $password.val();
        // 正则验证
        let result = Strategy.use("password", password);
        if (!result) {
            $pwderr.css("display", "block");
            $pwdok.css("display", "none");
            password_lock = false;
            return;
        }
        $pwdok.css("display", "block");
        $pwderr.css("display", "none");
        password_lock = true;
    })
    $nickname.on("blur", () => {
        // 获取密码
        let nickname = $nickname.val();
        // 正则验证
        let result = Strategy.use("nickname", nickname);
        if (!result) {
            $nickerr.css("display", "block");
            $nickok.css("display", "none");
            nickname_lock = false;
            return;
        }
        $nickok.css("display", "block");
        $nickerr.css("display", "none");
        nickname_lock = true;
    })

    $registBtn.on("click", () => {
        if (!username_lock || !password_lock || !nickname_lock) {
            return;
        }
        // 获取用户名  获取密码发送ajax 提交请求
        // jQuery方法 serialize() 它用于序列化表单中的数据
        let data = $("form").serialize()
        console.log(data);
        $.ajax({
            url: "/php/regist.php",
            data, // data是携带的数据 它的格式可以是对象也可以是querystring
            type: "post",
            dataType: "json",
            success(data) {
                // 如果注册成功跳转到登录页面 如果注册失败 提示用户
                if (!data.error) {
                    alert("注册成功！");
                    location.href = "./login.html";
                    return;
                }
                $caution.html("注册失败！请联系客服人员");
                $modal.modal('show');
            }
        })
    })
})